<template>
  <div class="article">
    <!-- 上部 -->
    <el-card class="box-card">
        <div slot="header" class="clearfix">
            <!-- 左侧面包屑 -->
            <el-breadcrumb separator-class="el-icon-arrow-right">
              <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
              <el-breadcrumb-item>内容管理</el-breadcrumb-item>
            </el-breadcrumb>
            <!-- <el-button style="float: right; padding: 3px 0" type="text">操作按钮</el-button> -->
        </div>
        <!-- 上部表单区域 -->
        <el-form ref="form" :model="form" label-width="80px">
          <el-form-item label="状态">
            <el-radio-group v-model="status">
              <el-radio :label="null">全部</el-radio>
              <el-radio :label="0">草稿</el-radio>
              <el-radio :label="1">待审核</el-radio>
              <el-radio :label="2">审核通过</el-radio>
              <el-radio :label="3">审核失败</el-radio>
              <el-radio :label="4">已删除</el-radio>
            </el-radio-group>
          </el-form-item>
          <el-form-item label="频道">
            <el-select v-model="channelId" placeholder="请选择">
              <el-option 
              v-for="(channel,index) in channels"
              :label="channel.name" 
              :value="channel.id"
              :key="index"
              >
              </el-option>
            </el-select>
          </el-form-item>

          <el-form-item label="日期">
            <el-date-picker
              v-model="rangeDate"
              format="yyyy-MM-dd"
              value-format="yyyy-MM-dd"
              type="datetimerange"
              range-separator="至"
              start-placeholder="开始日期"
              end-placeholder="结束日期">
            </el-date-picker>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="getArticles(1)" v-loading="loading">筛选</el-button>
          </el-form-item>
        </el-form> 
    </el-card>
    <!-- 下部 -->
    <el-card class="from-card">
      <!-- 顶部标题 -->
        <div slot="header" class="clearfix">
            <span>根据筛选条件共查询到{{totalCount}}条结果</span>
        </div>
      <!-- 中间表格 -->
      <el-table
      v-loading="loading"
      stripe
      :data="articles"
      style="width: 100%">
        <el-table-column
        label="封面"
        width="180">
          <template slot-scope="scope">
            <img v-if="scope.row.cover.images[0]" :src="scope.row.cover.images[0]" alt="" class="article-cover">
            <img v-else alt="" class="article-cover" src="./images/noImage.png">
          </template>
        </el-table-column>
        <el-table-column
          prop="title"
          label="标题"
          width="180">
        </el-table-column>
        <el-table-column
        label="状态">
          <template  slot-scope="scope">
            <el-tag v-if="scope.row.status === 0">草稿</el-tag>       
            <el-tag v-if="scope.row.status === 1" type="info">待审核</el-tag>       
            <el-tag v-if="scope.row.status === 2" type="success">审核通过</el-tag>       
            <el-tag v-if="scope.row.status === 3" type="warning">审核失败</el-tag>       
            <el-tag v-if="scope.row.status === 4" type="danger">已删除</el-tag>       
          </template>
        </el-table-column>
        <el-table-column
          prop="pubdate"
          label="发布时间">
        </el-table-column>
        <el-table-column
          label="操作">
          <template slot-scope="scope">
            <el-button type="primary" size="small"  circle  icon="el-icon-edit" @click="$router.push('/publish?id=' + scope.row.id)"></el-button>
            <el-button type="danger"  size="small"  circle  icon="el-icon-delete" @click="onDeleteArticle(scope.row)"> </el-button>
          </template>
        </el-table-column>
      </el-table>
      <!-- 底部分页区域 -->
      <el-pagination
        :disabled="loading"
        background
        class="paging"
        layout="prev, pager, next"
        :total="totalCount"
        @current-change="onCurrentChange"
        :current-page.sync="currentPage">
      </el-pagination>
    </el-card> 
    
 </div>
</template>
<script>
import { getArticles,getArticlesChannel,removeArticle
 } from '@/api/article'

export default {
  name: 'ArticleIndex',
  data() { 
    return {
        form: {
          name: '',
          region: 'null',
          date1: '',
          date2: '',
          delivery: false,
          type: [],
          resource: '',
          desc: ''
        },
        currentPage:1,//当前页码
        loading:true,
        channelId:null,
        articles: [],//请求来的文章数据
        totalCount:0,//请求的文章总页数
        status:null,//筛选中的 状态
        channels: [],//频道列表
        rangeDate:null,//筛选的日期范围
    }
  },
  props: {

  },
  components:{
  },
  mounted() {

  },
  created(){  
    this.getArticles(1),
    this.getArticlesChannel()
  },
  methods:{

    //当前页码改变时的回调
    onCurrentChange(page = 2){
      console.log('onCurrentChange改变了',page);
      // 根据分页请求数据
      this.getArticles(page)
    },

    //请求文章数据
    async getArticles(page = 3){
      this.loading = true
      try {
        let res = await getArticles({
          page: page,
          status: this.status,
          channel_id: this.channelId,
          begin_pubdate: this.rangeDate? this.rangeDate[0]:null,
          end_pubdate:this.rangeDate? this.rangeDate[1]:null
        })
        //设置文章数据
        this.articles = res.data.data.results
        //设置总页码数
        this.totalCount = res.data.data.total_count
        console.log('请求文章数据成功97',res);
        //关闭loading
        this.loading = false
      } catch (error) {
        this.loading = false
        console.log('走catch请求文章失败',error);
      }


    },
    //请求频道列表
    getArticlesChannel(){
      getArticlesChannel().then(res => {
        console.log('平道列表',res);
        this.channels = res.data.data.channels
      })
    },
    //删除文章
    onDeleteArticle(row){
      console.log('222');
      removeArticle(row.id).then(res=> {
        console.log('删除结果',res);
        this.getArticles(this.currentPage)

      })
    }
  },
 }
</script>

<style scoped <style lang="less">
    .from-card {
        margin-top: 20px;
    }
    .paging {
      margin-top: 30px;
    }
    .article-cover {
      width: 60px;
     background-size: cover;
    }
</style>